<template>
  <div id="sltEquipment">
    <div class="tree-table">
      <div class="tools">
        <el-form :model="seachForm" class="form-input-m" label-width="80px" :inline="true">
          <el-form-item>
            <el-input type="text" clearable v-model="seachForm.seachValue" placeholder="请输入查询关键字"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="findEquipmentList()">查询</el-button>
          </el-form-item>
        </el-form>
        <vxe-table class="mytable-scrollbar supplierTableClazz" v-loading="loading" :data="equipmentList" ref="verifyTableRef" :row-config="{ keyField: 'id', isHover: true }" :column-config="{ resizable: true }" @radio-change="changeRow" resizable show-overflow keep-source>
          <vxe-column type="seq" width="30" title=""></vxe-column>
          <vxe-column type="radio" width="20"></vxe-column>
          <vxe-column field="equiptName" title="名称"></vxe-column>
          <vxe-column field="specification" title="规格型号"></vxe-column>
          <vxe-column field="amount" title="价格"></vxe-column>
          <vxe-column field="supplierName" title="供应商"></vxe-column>
          <vxe-column field="manuName" title="生产商"></vxe-column>
          <vxe-column field="equiptCode" title="设备单号"></vxe-column>
        </vxe-table>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import {IsEmpty} from "@/utils/common";
let { proxy }: any = getCurrentInstance();
let equipmentList: any = reactive([]);
let patrolTaskEqList: any = reactive([]);
let checkedRowList: any = reactive([]);
let type = ref('');
let verifyTableRef = ref(null);

let seachForm = reactive({
  seachValue: '',
  status: '',
  statuss: []
});
let loading = ref(false);

onMounted(() => {
  findEquipmentList();
});

//暴露属性和方法
defineExpose({
  checkedRowList,
  setPatrolTaskEqList
});

function setPatrolTaskEqList(data: any) {
  patrolTaskEqList.length = 0;
  patrolTaskEqList.push(...data);
  findEquipmentList();
}
function changeRow(checkedRows) {
  checkedRowList.length = 0;
  if (!IsEmpty(checkedRows.row)) {
      checkedRowList.push(checkedRows.row);
  }
}

function findEquipmentList() {
  loading.value = true;
  equipmentList.length = 0;
  const url = '/api/eq/eqEquipment/findEqEquipmentList';
  const data = { searchValue: seachForm.seachValue };
  proxy.$http
    .get(url, { params: data })
    .then((res: any) => {
      equipmentList.push(...res.data);
      // //遍历项目列表，勾选已选中的项目
      if (patrolTaskEqList.length > 0) {
        const sltStandardList = [];
        for (const item of equipmentList) {
          if (patrolTaskEqList.some((p: any) => p.eqId === item.id)) {
            //选中行
            sltStandardList.push(item);
            verifyTableRef.value.setRadioRow(item, true);
          }
        }
        patrolTaskEqList.push(...sltStandardList);
      }
      loading.value = false;
    })
    .catch((err) => {
      loading.value = false;
    });
}
</script>
<style lang="scss">
#sltEquipment {
  .tree-table {
    margin-top: 10px;
    display: flex;
    min-height: 400px;
    .tools {
      width: 100%;
      margin: 0;
      .el-form {
        margin-bottom: 0px;
      }
      .el-divider {
        width: 100%;
      }
      .el-divider--horizontal {
        margin: -20px 0 20px 0;
      }
      .el-divider__text {
        font-size: $font-size;
      }
      .el-dialog__body {
        padding-top: 20px;
      }
      .divider {
        width: 310px;
        .el-divider__text {
          font-weight: bold;
          font-size: $font-size;
        }
      }
    }
    .el-table {
      margin-bottom: 10px;
    }
  }
}
</style>
